<template>
  <div id="index">
    <!--header-->
    <headers></headers>
    <!--header end-->
    <!--banner-->
    <div class="home-banner">
      <div class="home-banner-inner">
        <div class="banner-inner-item daliandong-banner show">
          <div class="video">
            <video id="video" src="../assets/img/video/电路板logo~2.mp4" muted loop autoplay="autoplay">
            您的浏览器不支持 video 标签。
            </video>
            <!-- <div class="title">
              <p>智慧医疗治理专业解决方案及服务商</p>
              <p>全面提升智慧医疗科学化、精细化、智能化水平</p>
            </div> -->
          </div>
          
          <div class="banner-inner-con">
            <div class="banner-inner-text banner-inner-xb">
              <a
                class="panel-btn-detail"
                href="solution.html"
                style="margin-top:20%;position: relative;z-index: 99;"
                >查看详情</a
              >
            </div>
          </div>
        </div>
        <div class="banner-inner-item dashuju-banner">
          <img
            class="banner-img"
            width="792" height="681"
            src="../assets/img/index/矢量智能对象1@2x.png"
          />
          <div class="banner-inner-con">
            <div class="banner-inner-text">
              <h1>颐东大数据</h1>
              <p>
                肺癌中晚期辅助诊疗、胃癌基因大数据科研、 <br />云康复步态分析、小白影像识别
              </p>
              <a
                class="panel-btn-detail"
                href="product-class_id-131-seo_config_id-145.html"
                >查看详情</a
              >
            </div>
          </div>
        </div>
        <div class="banner-inner-item huanwei-banner">
          <img
            class="banner-img"
            width="803" height="577"
            src="../assets/img/index/矢量智能对象@2x.png"
          />
          <div class="banner-inner-con">
            <div class="banner-inner-text">
              <h1>颐东科研</h1>
              <p>
                肺癌中晚期辅助诊疗、胃癌基因大数据科研、 <br />云康复步态分析、小白影像识别
              </p>
              <a
                class="panel-btn-detail"
                href="product-class_id-106-seo_config_id-115.html"
                >查看详情</a
              >
            </div>
          </div>
        </div>
        <div class="banner-inner-item zhifa-banner">
          <img
            class="banner-img"
            width="757" height="568"
            src="../assets/img/index/yidongbei@2x.png"
          />
          <div class="banner-inner-con">
            <div class="banner-inner-text">
              <h1>颐东杯</h1>
              <p>
                肺癌中晚期辅助诊疗、胃癌基因大数据科研、 <br />云康复步态分析、小白影像识别
              </p>
              <a
                class="panel-btn-detail"
                href="product-class_id-105-seo_config_id-114.html"
                >查看详情</a
              >
            </div>
          </div>
        </div>
      </div>
      <div class="banner-inner-tab">
        <div class="tab-line">
          <div class="tab-line-img">
            <img src="http://www.xbcx.com.cn/images/public/gradient_line.png" />
          </div>
        </div>
        <div class="tab-con">
          <div class="tab-item">
            <img width="50" height="50"
              src="../assets/img/index/yiliao.png"/>
            <p class="title">颐东医疗</p>
            <span>打造智慧医疗服务体系</span>
          </div>
          <div class="tab-item" style="width:24%;">
            <img  width="50" height="50"
              src="../assets/img/index/dashuju.png" />
            <p class="title">颐东大数据</p>
            <span>颐东数仓、大数据技术等等</span>
          </div>

          <div class="tab-item">
            <img  width="50" height="50" 
              src="../assets/img/index/keyan.png" />
            <p class="title">颐东科研</p>
            <span>智慧研发智能机器人等等</span>
          </div>
          <div class="tab-item" style="width:26%;">
            <img  width="50" height="50"
              src="../assets/img/index/jiangbei.png" />
            <p class="title">颐东杯</p>
            <span>历届颐东杯展示</span>
          </div>
        </div>
      </div>
    </div>
    <!--banner end-->

    <!--main-->
    <div class="home-container">
      <div class="recent-news">
        <div class="section-title">
          <h1>新闻资讯</h1>
          <span>news</span>
        </div>
        <div class="section-panel">
          <div class="panel-left">
            <a class="panel-img" href="info_detail-id-694.html"
              ><img
                src="http://www.xbcx.com.cn/cms/uploads/image/20200513/1589373199.jpg"
            /></a>

            <div class="news">
              <p>人民解放军东部战区总医院领导莅临颐东调研交流</p>
              <p>5月9日，人民解放军东部战区总医院总院病理科主任饶秋、 南京世和基因生物技术股份有限公司生物信息部转录组组...</p>
            </div>
          </div>
          <div class="panel-right">
            <div class="panel-list">
              <div class="panel-list-item">
                <a href="info_detail-id-691.html"
                  >待开发
                </a>
                <p>新闻 <label class="">| 报道来源:小步创想</label></p>
              </div>
            </div>
            <a href="info.html" class="panel-btn-all">查看全部</a>
          </div>
        </div>
      </div>

      <div class="solution-panel">
        <div class="section-title">
          <h1>产品解决方案</h1>
          <span>product</span>
        </div>
        <div class="cur-item">
          <span @click="changeshow(index)" :class="show == index ? 'show' : ''" v-for="(item,index) of lists" :key="index">{{item.title}}</span>
        </div>
        <div class="solution-scroll">
          <div class="scroll-container">
            <ul>
              <li class="solution-box-item scroll-item">
                <div class="solution-normal">
                  <div class="solution-img">
                    <img
                      src="../assets/img/index/p1@2x.png"
                      width="100%"
                    />
                  </div>

                  <span class="solution-icon"
                    ><img
                      width="52" height="46"
                      src="../assets/img/index/互联网医院@2x.png"
                  /></span>
                  <h4 class="solution-tit">互联网医院</h4>
                </div>
                <div class="solution-hover">
                  <div class="solution-hover-con">
                    <span class="solution-icon"
                      ><img
                        src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540976866.png"
                    /></span>

                    <h4 class="solution-tit">互联网医院</h4>
                    <p class="solution-des">
                      待开发
                    </p>
                    <a
                      class="panel-btn-more solution-btn-more"
                      href="product-class_id-131-seo_config_id-145.html"
                      >查看详情</a
                    >
                  </div>
                </div>
              </li>
              <li class="solution-box-item scroll-item">
                <div class="solution-normal">
                  <div class="solution-img">
                    <img
                      src="../assets/img/index/p2@2x.png"
                      width="100%"
                    />
                  </div>

                  <span class="solution-icon"
                    ><img
                      width="46" height="46"
                      src="../assets/img/index/系统@2x.png"
                  /></span>
                  <h4 class="solution-tit">集成平台</h4>
                </div>
                <div class="solution-hover">
                  <div class="solution-hover-con">
                    <span class="solution-icon"
                      ><img
                        src="http://www.xbcx.com.cn/cms/uploads/image/20180725/1532512435.png"
                    /></span>

                    <h4 class="solution-tit">集成平台</h4>
                    <p class="solution-des">
                      待开发
                    </p>
                    <a
                      class="panel-btn-more solution-btn-more"
                      href="product-class_id-146-seo_config_id-145.html"
                      >查看详情</a
                    >
                  </div>
                </div>
              </li>
              <li class="solution-box-item scroll-item">
                <div class="solution-normal">
                  <div class="solution-img">
                    <img
                      src="../assets/img/index/p3@2x.png"
                      width="100%"
                    />
                  </div>

                  <span class="solution-icon"
                    ><img
                      width="54" height="42"
                      src="../assets/img/index/医保@2x.png"
                  /></span>
                  <h4 class="solution-tit">医保报销</h4>
                </div>
                <div class="solution-hover">
                  <div class="solution-hover-con">
                    <span class="solution-icon"
                      ><img
                        src="http://www.xbcx.com.cn/cms/uploads/image/20181031/1540979272.png"
                    /></span>

                    <h4 class="solution-tit">医保报销</h4>
                    <p class="solution-des">
                      待开发
                    </p>
                    <a
                      class="panel-btn-more solution-btn-more"
                      href="product-class_id-152-seo_config_id-145.html"
                      >查看详情</a
                    >
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <a class="panel-btn-all solution-btn" href="solution.html">MORE</a>
      </div>
    </div>
    <!--main end-->
    <div class="float-box">
      <!-- <div class="qq-advice">
        <a
          class="qq-advice-inner"
          href="http://wpa.qq.com/msgrd?v=3&uin=2366320826&site=qq&menu=yes"
          target="_blank"
        >
          <img src="http://www.xbcx.com.cn/images/public/advice_icon.png" />
          <span>在线咨询</span>
        </a>
        <div class="tel-advice">
          <div class="tel-icon">
            <img src="http://www.xbcx.com.cn/images/public/phone.png" />
          </div>
          <div class="tel-box">
            <img src="http://www.xbcx.com.cn/images/public/phone2.png" />
            <div class="tel-box-r">
              <p>咨询热线</p>
              <span>400-864-9582</span>
            </div>
          </div>
        </div>
      </div> -->

      <a class="back-top"></a>
    </div>

    <!--footer-->
    <footers></footers>
  </div>
</template>

<script>
// 依赖jQuery库
import $ from "jquery";
// 页头
import headers from '../component/headers'
// 页尾
import footers from '../component/footers'
export default {
  name: "index",
  data() {
    return {
      lists : [
        { title:'颐东医疗'},
        { title:'颐东数据'},
        { title:'颐东科研'},
        { title:'颐东杯'},
        { title:'MORE'}
      ],
      show : 0,
      paging: {
        pageNow: 1,
        pageSize: 4
      },
      entity : {},
      infoList: []
    }
  },
  components : {
    headers,
    footers
  },
  methods: {
    bdshare() {
      $(function() {
        var share_target_url;
        var share_target_sharetitle;
        var share_target_shareabstract;

        $(".bdsharebuttonbox>a").mouseover(function() {
          var Tthis = $(this);
          var url = window.location.href;
          var oneurl;

          if ($(this).hasClass("popVideo")) {
            var url = "http://zf.xbcx.com.cn/shareVideo.php";
          } else {
            var url = window.location.href;
          }

          oneurl = url;
          if (url.indexOf("#") > 0) {
            oneurl = url.substring(0, url.indexOf("#"));
          }
          if (oneurl.indexOf("?") > 0) {
            share_target_url =
              oneurl +
              "&" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          } else {
            share_target_url =
              oneurl +
              "?" +
              Tthis.data("suffixe") +
              "&video_id=" +
              Tthis.data("sharevideo");
          }
          share_target_sharetitle = Tthis.data("sharetitle");
          share_target_shareabstract = Tthis.data("shareabstract");
        });

        window._bd_share_config = {
          common: {
            onBeforeClick: function(cmd, config) {
              if (!share_target_url) {
                share_target_url = window.location.href;
              }
              config.bdUrl = share_target_url;
              config.bdText = share_target_sharetitle;
              config.bdDesc = share_target_shareabstract;
              return config;
            },
          },

          share: [
            {
              tag: "share_1",
              bdSize: 24,
            },
            {
              tag: "share_2",
              bdSize: 32,
            },
          ],
        };
      });
    },
    common() {
      //导航下拉菜单
      $(".header-nav-menu")
        .mouseenter(function() {
          var hasChild = $(this).find(".header-subnav").length;
          if (hasChild > 0) {
            $(this)
              .find(".header-subnav")
              .stop()
              .slideDown("fast");
          }
        })
        .mouseleave(function() {
          $(this)
            .find(".header-subnav")
            .stop()
            .slideUp("fast");
        });

      $(window).scroll(function() {
        if ($(window).scrollTop() > 0) {
          $(".header").addClass("scroll");
        } else {
          $(".header").removeClass("scroll");
        }
      });
      
      var scrollFun = function() {
        var width = ($(".scroll-container").width() - 60) / 4;
        $(".scroll-item").width(width);
        var img_len = $(".scroll-item").length;
        var img_wd = width;

        var num = 0;
        if (img_len < 5) {
          $(".scroll-next,.scroll-prev").hide();
          $(".scroll-container ul").css({
            width: "100%",
            "text-align": "center",
          });
        }
        if ($(".scroll-container ul li").length > 4) {
          $(".scroll-container ul").append($(".scroll-container ul").html());
        }

        $(".scroll-next").click(function() {
          if (num == img_len) {
            num = 0;
            $(".scroll-container ul").css("left", 0);
          }
          num++;
          move(-num);
        });

        $(".scroll-prev").click(function() {
          if (num == 0) {
            num = img_len;
            $(".scroll-container ul").css("left", -num * (img_wd + 13) + "px");
          }
          num--;
          move(-num);
        });

        function move(num) {
          $(".scroll-container ul")
            .stop()
            .animate({
              left: num * (img_wd + 13) + "px",
            });
        }
      };
      // scrollFun();
      autoRound(".honor-cell", ".honor-img-big div");
      autoRound(".about_team_peo", ".about_team_text");
      function autoRound(item, detail) {
        var $item = $(item);
        var $detail = $(detail);

        var i = 0;
        var length = $item.length;
        var t = setInterval(function() {
          i++;
          if (i == length) {
            i = 0;
          }
          $item
            .eq(i)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        }, 15000);

        $item.mouseenter(function() {
          clearInterval(t);
          var i = $(this).index();
          $(this)
            .addClass("cur")
            .siblings()
            .removeClass("cur");
          $detail
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
        });

        $item.mouseleave(function() {
          var i = $(this).index();
          t = setInterval(function() {
            i++;
            if (i == length) {
              i = 0;
            }
            $item
              .eq(i)
              .addClass("cur")
              .siblings()
              .removeClass("cur");
            $detail
              .eq(i)
              .addClass("show")
              .siblings()
              .removeClass("show");
          }, 15000);
        });
      }

      indexBanner();
      function indexBanner() {
        var n = 0;
        var t = n;
        var width = $(".banner-inner-tab .tab-item").width();
        var count = $(".banner-inner-item").length;
        $(".banner-inner-tab .tab-line img").width(width);

        $(".banner-inner-tab .tab-item").click(function() {
          var i = $(this).index();
          n = i;
          if (i >= count) {
            return;
          }

          $(".banner-inner-item")
            .eq(i)
            .addClass("show")
            .siblings()
            .removeClass("show");
          $(".tab-line img").css({
            transform: "translateX(" + width * i + "px)",
          });
        });

        t = setInterval(showAuto, 15000);

        $(".banner-inner-tab").hover(
          function() {
            clearInterval(t);
          },
          function() {
            t = setInterval(showAuto, 15000);
          }
        );

        function showAuto() {
          n = n >= count - 1 ? 0 : ++n;
          $(".banner-inner-tab .tab-item")
            .eq(n)
            .trigger("click");
        }
      }

      $(".back-top").on("click", function() {
        $("body,html").animate({ scrollTop: 0 }, 500);
        return true;
      });

      $(".product-shouqi").click(function() {
        var w = $(".product-posit").width();
        $(".product-posit").css("margin-left", -w);
        setTimeout(function() {
          $(".product-zhankai").show();
          $(this).hide();
        }, 400);
      });
      $(".product-zhankai").click(function() {
        $(".product-posit").css("margin-left", 0);
        $(".product-shouqi").show();
        $(this).hide();
      });
    },
    video_player() {
      var palyers = {};
      window.TPlayer = {
        play: function(eleID, fileId, auto_play, size) {
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          var option = {
            auto_play: auto_play,
            file_id: fileId,
            app_id: "1252000488",
            width: size.width,
            height: size.height,
          };
          /*调用播放器进行播放*/
          palyers[eleID] = new qcVideo.Player(
            /*代码中的id_video_container将会作为播放器放置的容器使用, 可自行替换*/
            eleID,
            option
          );
          return palyers[eleID];
        },
        pasue: function(eleID) {
          palyers[eleID].pause();
        },
        pasueAll: function() {
          $.each(palyers, function(i, n) {
            n.pause();
          });
        },
        change: function(eleID, fileId, auto_play, size) {
          if (!palyers[eleID]) {
            this.play(eleID, fileId, auto_play, size);
          }
          palyers[eleID].changeVideo({
            app_id: "1252000488",
            file_id: fileId,
            auto_play: auto_play,
          });
        },
        livePlay: function(eleID, url, size) {
          //http://ptest-meeket.xbwq.com.cn/meeket/viewer/live/viewer/index?a=d722031322a3224696f5d6f63622c22283131322a3224696f5566796c622b7
          if (!size) {
            size = {
              width: 614,
              height: 381,
            };
          }
          if ($("iframe_" + eleID).length) {
            return;
          }
          $("#" + eleID).html(
            '<iframe id="iframe_' +
              eleID +
              '" src="' +
              url +
              "&is_full_play=1&v_height=" +
              size.height +
              '"' +
              'height="' +
              size.height +
              '" width="' +
              size.width +
              '" frameborder="0"></iframe>'
          );
        },
        liveStop: function(eleID) {
          $("#" + eleID).html("");
        },
      };
    },
    changeshow(index) {
      this.show = index;
    },
    getInfoList(){
        const {entity , paging} = this
        this.$axios.post('/articleInfoRouter/queryArticleInfoList',{entity,paging : this.paging}).then(res=>{
            this.nfoList = res.data.data
        })
    }
  },
  mounted() {
    this.bdshare();
    this.common();
    this.video_player();
    let c = document.getElementById('video');
    c.play()
  },
};
</script>


<style scoped>
  .tab-item {
    line-height: 15px;
  }
  .cur-item {
    width: 100%;
    text-align: center;
    margin: 20px 0  40px 0;
  }
  .cur-item > span {
    margin-right: 20px;
    border: 1px solid ;
    padding: 5px 8px;
    cursor: pointer;
    color: #8D8D8D;
    border: none;
    font-size: 14px;
  }
  .cur-item > span.show {
    background: #089563;
    color: #fff;
  }
  video {
    margin-top: -150px;
    width: 100%;
  }
  .news {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
  }
  .news > p:nth-child(2) {
    font-size: 16px;
    color: #999999;
    font-weight: 400;
  }
</style>